<template>
  <div class="new" style="width: 100vw;height: 100vh;overflow: scroll;">

    <pull-to
      :bottom-load-method="infiniteHandler"
      :is-top-bounce=false
      :bottom-config="BOTTOM_DEFAULT_CONFIG">
      <div class="body">

        <img src="../../assets/img/banner.png" alt="">
        <div class="timeList">
          <van-tabs v-model="active" color="#59057b" line-width=0px sticky swipeable style="width: 100%;height: 100%;">
            <van-tab v-for="(index,key) in dataList" :key="key" color="#59057b" v-if="key<=3">
              <div slot="title" color="#59057b" style="color: #666;font-size: 20px;padding-top:
                    14px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
                    ">
                {{index.start_day}}<br/>
                <span style="color: #666;font-size: 15px;margin-top: -10px">{{index.start_hour}}</span>
              </div>
              <newActive class="footer" :id="index.new_id" :newTime="index.new_time"
                         :nowTime="index.nowTime" :dataList="dataList"></newActive>
            </van-tab>
          </van-tabs>
        </div>
      </div>

    </pull-to>

  </div>
</template>

<script>
  import newActive from '../../components/new/newActive'
  import request from '../../request/index'
  import PullTo from 'vue-pull-to'
  export default {
    name: "New",
    components:{
      newActive,
      PullTo
    },
    data(){
      return{
        isFixed:false,
        new_id:'',
        id:'',
        active:0,
        page:1,
        datas:[],
        dayTimeLists:[],
        dayGoodLists:[],
        dataList:[],
        isFullScreen:1,
        BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑继续加载",
          triggerText: "释放更新",
          loadingText: "加载中,请稍后",
          doneText: "内容已全部展示了",
          failText: "加载失败",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
        },
      }
    },
    created(){
      request.getDayNew(this);

    },
    mounted() {
      document.title = "每日上新";
      /*if (this._globe.isAndroid){
        $("#noHead").css('display','none');
      }
      if (this._globe.isIos) {
        $(document).ready(function(){
          $(window).scroll(function() {
            var top = 70; //获取指定位置
            var scrollTop = $(window).scrollTop();  //获取当前滑动位置
            if(scrollTop < top){                 //滑动到该位置时执行代码
              $("#noHead").css('opacity',scrollTop/top);
            }else{
              $("#noHead").css('opacity',1);
            }
          });
        });
      }*/
    },
    methods:{
      infiniteHandler:function(loaded){
        if(this.page<this.datas.all_page){
          request.loadedNewGoods(this,loaded,this.id)
        }else{
          this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
          loaded("done");
          this.loaded = true;
        }
      },


    }
  }
</script>

<style scoped lang="scss">
  .van-tab{
    color: #333;
  }

  .top{
    width: 100vw;
    height:70px;
    background: #333;
    position: fixed;
    opacity: 0;
    top: 0px;
    z-index: 99999999999;
  }
  .van-tabs__line {
    z-index: 1;
    left: 0;
    bottom: 15px;
    height: 2px;
    position: absolute;
    background-color: #666;
  }
  .noHead{
    width: 100vw;
    background: #333;
    opacity: 0;
    height: 70px;
    position: fixed;
    top: 0px;
    z-index: 98999999;
  }
  .body{
    width: 100vw;
    height: 100%;
    background: #F452E7;
    position: relative;
    z-index: 9999;
    img{
      width: 100vw;
      height: 59.2vw;
      display: inline-block;
    }
    .timeList{
      width: 100vw;
      height: 26vw;
      background: #fff;
      border-top-left-radius: 3vw;
      border-top-right-radius: 3vw;
      margin-top: -2vw;
    }
  }
  .mu-tabs{
    height: 100%;
    background: #fff;
    color: #333;
    border-top-left-radius: 3vw;
    border-top-right-radius: 3vw;
  }
  .mu-tab{
    flex: 1;
    font-size: 20px;
  }
  .mu-tab-active{
    color: #59057B;
  }
  .mu-tab-link-highlight{
    background: #59057B !important;
    height: 5px !important;
  }

</style>
<style lang="scss">
  .new{
    .van-tab--active{
      font-weight: bold;
    }
    van-tabs__content{
      padding-top: 8vw;
    }
    .van-tab--active div, .van-tab--active span{
      color:#59057b !important;
    }
    .van-tabs--line .van-tabs__wrap {
      height: 19vw !important;
    }
    @media screen and (min-width: 320px) and (max-width: 375px){
      .van-tabs--line .van-tabs__wrap{
        height: 23vw !important;
      }
    }
  }
</style>
